<template>
	<!-- class="rloading" -->
	<view @click="$emit('handle',value)" class="card_lateral bg-white flex margin-sm radius">
		<!-- 图片 -->
		<view class="card_lateral-image radius" :class="[value.cover ? '' : 'rloading']">
			<image v-if="value.cover" :src="value.cover" mode="aspectFill"></image>
		<view v-if="value.bookCnt || value.pages" class="card_lateral-count text-sm">
			{{value.bookCnt || value.pages}}本
		</view>
		</view>
		<!-- 信息 -->
		<view class="card_lateral-info padding flex justify-between flex-de">
			<view>
				<view v-if="value.name">
					<rich-text :nodes="nameChange"></rich-text>
				</view>
				<view v-else style="height: 40upx;" class="rloading"></view>
				<view v-if="value.author" class="text-sm margin-top-xs text-gray">作者：{{value.author}}</view>
				<view v-else style="height: 30upx;" class="rloading margin-top-xs"></view>
			</view>
			<view v-if="value.state" class=" text-sm "
				:class="[value.state=='READING' ? 'text-orange' : value.state=='FINISHED' ? 'text-green' : 'text-grey']">
				{{value.state | stateFilter}}
			</view>
			<view class="text-sm" v-if="type=='Search' && value.bookNames" >
				<rich-text :nodes="bookNamesChange"></rich-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			value:{type:Object,default:()=>({})},
			search:String,
			type:String
		},
		computed:{
		  nameChange(){
			  let type=this.type;
			  if(type=='Audio'){
				  return this.value.name || ''
			  }
			  let search=this.search.split('');
			  let name=this.value.name.split('');
			  let value='';
			  name.forEach(str=>{
				  value+=search.includes(str) ? `<span class="text-orange" >${str}</span>` : str
			  })
			  return value
		  },	
		  bookNamesChange(){
			  let type=this.type;
			  if(type=='Audio'){
				  return this.value.name || ''
			  }
			  let search=this.search.split('');
			  let name=this.value.bookNames.split('');
			  let value='包含绘本：';
			  name.forEach(str=>{
				  value+=search.includes(str) ? `<span class="text-orange" >${str}</span>` : str
			  })
			  return value
		  },	
		},
		filters: {
			stateFilter(val) {
				// 未读NEVER_READ、未完成 READING、已完成 "FINISHED"
				switch (val) {
					case 'READING':
						return '未完成';
					case 'FINISHED':
						return '已完成';
					default:
						return '未读'
				}
			}
		}
	}
</script>

<style lang="scss">
	.card_lateral {
		height: 250upx;

		.card_lateral-image {
			height: 100%;
			width: 200upx;
			min-width: 200upx;
			overflow: hidden;
			position: relative;

			image {
				width: 100%;
				height: 100%;
			}
			.card_lateral-count{
				position: absolute;
				left: 0;
				top: 0;
				background-color: rgba(0, 0, 0, 0.5);
				color: #fff;
				padding: 5upx 20upx;
				border-radius: 0 0 20upx 0;
			}
		}

		.card_lateral-info {
			flex-direction: column;
			flex: auto;
		}
	}
</style>